<!--
 * @Description: 添加,编辑举报项弹窗组件
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-12-08 16:02:33
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-16 10:40:01
-->

<template>
  <el-dialog
    width="570px"
    :title="_formData.genre == 'add' ? '添加举报项' : '编辑举报项'"
    :visible.sync="_isShow"
    :close-on-click-modal="false"
  >
    <el-form
      ref="refForm"
      style="padding-right: 40px"
      :model="_formData"
      :validate-on-rule-change="false"
      label-width="120px"
    >
      <el-form-item
        prop="settingsName"
        :rules="formVerify.settingsName"
        label="举报项名称"
      >
        <el-input v-model="formData.settingsName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      <el-button @click="_isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 接口
import { reportUpdate } from '@/api/basics'
export default {
  props: {
    // 弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => {
        return {
          genre: 'add', // add或者edit
          settingsName: ''
        }
      }
    }
  },
  data() {
    return {
      formVerify: {
        settingsName: [
          { required: true, message: '请输入举报项名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    _isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    _formData: {
      get() {
        return this.formData
      },
      set(val) {
        this.$emit('update:formData', val)
      }
    }
  },
  methods: {
    onSubmit() {
      try {
        // 验证表单是否填写完善
        this.$refs.refForm.validate(async(valid) => {
          if (valid) {
            const formData = this._formData
            // 提交请求
            const { data, code } = await reportUpdate(formData)
            // 成功处理
            if (code === 0 && data === true) {
              if (this._formData.genre === 'add') {
                this.$message({ message: '添加举报项成功', type: 'success' })
              } else {
                this.$message({ message: '修该举报项成功', type: 'success' })
              }
              this._isShow = false // 关闭弹窗
              this.$emit('refresh') // 刷新列表数据
            } else {
              this.$message({ message: data, type: 'error' })
            }
          } else {
            console.log('error submit!!')
          }
        })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
